<template>

<!-- v-bind可以给class属性绑定属性，但是字符串拼接比较复杂，所以vue给class的绑定做了加强 -->
<!-- class不仅可以绑定字符串，还可以绑定对象和数组 -->

<!-- 绑定对象 1  标识符如果是false，则不会绑定到class里-->
 <p :class="{'active':isActive, 'text-danger':hasError}">class样式绑定1(class里定义一个对象)</p>

<!-- 绑定对象 2 -->
 <p :class="object">class样式绑定2(直接绑定一个现成的对象)</p>

<!-- 绑定数组 -->
 <p :class="[arrActive, arrHasError]">class样式绑定3(绑定一个数组)</p>

<!-- 数组里可以嵌套对象，但是对象里不能嵌套数组 -->
 <p :class="[arrActive, object]">class样式绑定4(绑定一个数组，数组里有对象)</p>

<!-- 数组里可以用三目运算符来有条件的渲染某个值 -->
 <p :class="[arrActive ? 'active' : '']">class样式绑定5(数组里用三目运算符)</p>
</template>

<script>

export default{
    data(){
        return{
            isActive:true,
            hasError:false,
            object:{
                'active':true,
                'text-danger':true
            },
            arrActive:'active',
            arrHasError:'text-danger'
        }
    }
}

</script>

<style>
.active{
    font-size: 40px;
}

.text-danger{
    color: red;
}
</style>